<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/feiyan.js"></script>
</head>
<body>
    <div class="box" style="width:1200px; height:800px">;
    <script>
        // 获取北京新冠趋势，按时间排序
        var beijin = data.data.feiyan.beijingTrends.sort((a,b)=>a.day-b.day);
        // 初始化
        var mychart = echarts.init(document.querySelector(".box"));
        // 选项
        var option = {
            title:{text:"新冠趋势"},
            tooltip:{},
            // 显示工具箱
            toolbox: {
                show: true,
                feature: {
                    // 数据缩放
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    // 数据只读
                    dataView: { readOnly: false },
                    // 魔法类型
                    magicType: { type: ['line', 'bar'] },
                    // 重置
                    restore: {},
                    // 保存图片
                    saveAsImage: {}
                }
            },
            legend:{ data:["北京趋势"]},
            // 把日期映射处理
            xAxis:{data: beijin.slice(0,20).map(item=>item.day)},
            yAxis:{},
            series:[
                // 把累计确诊映射出来
                {name:"北京趋势",data:beijin.slice(0,20).map(item=>item.rest_sure_cnt),type:'bar'}
            ],
            //进入动画
            // 动画缓动函数
            // animationEasing:"bounceInOut",
            // // 动画延迟
            // animationDelay: function (idx) {
            //     // 越往后的数据延迟越大
            //     return idx * 100;
            // },
            // // 动画时长
            // animationDuration: function (idx) {
            //     // 越往后的数据时长越大
            //     return idx * 100;
            // }

        };
        mychart.setOption(option);

        function auto(){
            // console.log("auto",beijin);
            // 删除返回第一个
            var first = beijin.shift();
            // 把第一个放入到最后面
            beijin.push(first);
            // 更新x轴线数据
            option.xAxis.data = beijin.slice(0,20).map(item=>item.day)
            // 更新系列数据
            option.series[0].data = beijin.slice(0,20).map(item=>item.rest_sure_cnt);
            // 更新mychart
            mychart.setOption(option);
           
        }

        var ind = setInterval(()=>{
            auto();
        },3000)

        // 鼠标移入停止
        function stop(){
            clearInterval(ind);
        }
        // play
        function play(){
            ind = setInterval(()=>{
                auto();
            },3000)
        }
        // 移入
        mychart.on("mouseover",stop);
        mychart.on("mouseout",play);

    </script>
</body>
</html>